<template>
    <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_search_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '表格穿梭框',
            docList: [
                {
                    label: '引入组件',
                    value: `
    import { ITransferTable } from 'wd-platform-library'
    import { TransferDataInterface } from 'wd-platform-library/lib/src/ITransferTable/src/ITransferTableInterFace'`
                },
                {
                    label: '表格穿梭框对象',
                    type: 'pre',
                    value: `
    const transferData = reactive<TransferDataInterface<any>>({
            dataList: [],
            checkList: [],
            //配置antdv穿梭框属性
            options:{
                disabled: true,  //可以根据权限设置是否禁止选择,true:禁止选择,false:可选
                showSearch:false, //是否展示搜索
                showSelectAll:false, //是否展示全选
            },
            leftTableColumns: [
                {
                    dataIndex: 'id', //表头各列对应字段
                    title: 'ID'   //表头各列展示标题
                },
                {
                    dataIndex: 'name', //表头各列对应字段
                    title: '名字'  //表头各列展示标题
                }
            ],
            rightTableColumns: [
                {
                    dataIndex: 'id', //表头各列对应字段
                    title: 'ID'  //表头各列展示标题
                },
                {
                    dataIndex: 'name', //表头各列对应字段
                    title: '名字'  //表头各列展示标题
                }
            ],
            filterField: 'id', //搜索框内配置对应的搜索字段
            replaceField: {
                key: 'id',  //表单数据对应展示字段  key:唯一标识符
                title: 'name', //表单数据对应展示字段
                disabled:"",  //描述
                description:"" //是否禁止选择
            }
        })
        `
                },
                {
                    label: 'leftTableColumns/rightTableColumns说明',
                    type: 'pre',
                    value: `
        {
            dataIndex: 'id', //表头各列对应字段
            title: 'ID'   //表头各列展示标题
        }`
                },
                {
                    label: '获取选中值(ref调用)',
                    type: 'pre',
                    value: `
        transferRef.value.checkTransferDataList()`
                },
                {
                    label: '数据左右转移回调方法',
                    type: 'pre',
                    value: `
        //selectKeys 回传参数:右侧选中的集合 @chagneTableDataFun="chagneTableDataFun"
       chagneTableDataFun(selectKeys)`
                }

            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
